<template>
    <div>
        <div id="device_form">
            <div class="weui-cells__title">设备类型</div>
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="child_type">
                    <div class="weui-cell__bd">
                        <p>儿童设备</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" class="weui-check" name="device_type" required tips="请扫码选择类型"
                               id="child_type"
                               value="0" disabled>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="old_type">

                    <div class="weui-cell__bd">
                        <p>老人设备</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="device_type" class="weui-check" id="old_type" value="1" disabled>
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>
            <div class="weui-cells__title">设备序列号</div>

            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__bd">
                    <input class="weui-input" name="sn" id="sn" type="text" placeholder="请扫描设备二维码">
                </div>
                <div class="weui-cell__ft">
                    <button type="button" id="scan_btn" class="weui-vcode-btn" @click="scan_code">
                        点击扫码
                    </button>
                </div>
            </div>


            <div class="weui_btn_area">
                <a class="weui-btn weui-btn_primary" @click="submit" id="subForm">提交</a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['content'],
        data() {
            return {
                msg: 'Welcome 1112 Your Vue.js App'
            }
        },
        methods: {
            scan_code() {
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        if (result.length > 0) {
                            try {
                                let jsonRes = JSON.parse(result)
                                if (jsonRes.hasOwnProperty("device") && jsonRes.hasOwnProperty("type")) {
                                    $("#sn").val(jsonRes.device)
                                    $("#device_type").val(jsonRes.type)
                                    if (jsonRes.type === "p9") {
                                        $("#child_type").prop("checked", true);
                                    } else {
                                        $("#old_type").prop("checked", true);
                                    }
                                } else {
                                    $.alert("不是正确的设备二维码", "注意")
                                }
                            } catch (e) {
                                $.alert("不是正确的设备二维码", "注意")

                            }
                        }
                    },
                    error: function (res) {
                        if (res.errMsg.indexOf('function_not_exist') > 0) {
                            alert('版本过低请升级')
                        }
                    },
                    cancel: function () {

                    }
                });
            },
            submit() {
                let form = $('#device_form');
                let selValue = $('input[name=device_type]:checked').val();
                if (undefined === selValue) {
                    $.alert("请扫码输入设备类型", "注意")
                    return false;
                }
                if ($("#sn").val().length === 0 || $("#sn").val() === "") {
                    $.alert("请扫码输入设备序列号", "注意")
                    return false;
                }
                let data = form.serialize();
                let device_type = $('input[name=device_type]:checked').val();
                data += "&device_type=" + device_type

                http({
                    url: '/activate_device',
                    param: {
                        data: data
                    }
                }).then(data => {
                    if (data.err === 0) {
                        $.alert("成功", "设备已经绑定成功，点击确定返回设备管理页面。", function () {
                            this.$emit('state', {
                                page: 'demo'
                            });
                        });
                    } else {
                        let alertText = (data.reason ? data.reason : "设备绑定失败，点击确定返回设备管理页面。")
                        $.alert("警告", alertText, function () {
                            //location.href = "/demo"
                        });
                    }
                });
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .weui_btn_area {
        margin-top: 10vw;
    }

    .weui-cells__title {
        margin-top: 1em;
        margin-bottom: 0;
        padding-left: 0;
    }
</style>
